﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowWidgetWithComponentAJAX.aspx.cs" Inherits="JQueryWidget.WidgetFrame.ShowWidgetWithComponentAJAX" %>

 <%@ Register Src="~/Modules/AdministratorToolBox.ascx" TagName="AdministratorToolBox" TagPrefix="JQueryWidget" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>   
    <style type="text/css">
    .widgetStore
    {
    }
    .column
    {
        margin:0px 0px 0px 0px;
        width:33%;
        display:block;
        float:left;
        position:relative; 
        height:800px;
    }
    .modbox
    {
        margin:0px 0px 0px 0px;
    }
    .widget
    { 
        border:1px solid gray;
        margin-top:10px;
    }
    .widget_header
    {
        background-color:lightblue;
    }
    .widget_body
    {
    }
    .widget_footer
    {
    }
    
    .draggable
    {
    }
    .droppable
    {
    }
    .widgetholder
    {
        border:2px dashed gray;
        display:none;
        position:relative;
        margin-top:10px;
    }
    
    .widgetholder1
    {
        border:2px dashed gray; 
        position:relative;
        margin-top:10px;
        height:40px;
    }  
    .additem
    {
    }
    
    .widgetSnap
    {
        display:none;
    }
    
    .widgetedit
    {
        float:right;
        display:none;
    }
    .widgetedit a
    {
        cursor:pointer;
    }
    .displaynone
    {
        display:none;
    }
    .widgetdownpanel
    {
        display:none;
        position:absolute;
        background-color:#E3E3E3;
        border:1px solid gray;
    }
    .widgetdownpanel a
    {
        display:block;
        cursor:pointer;
    }
    .widgetdownpanel a:hover
    {
        background-color:lightblue;
    }
    .dialog
    {
        display:none;
    }    
    .hide
    {
        display:none;
    }
    </style> 
    <link href="themes/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <div id="templateHolder" runat="server"> 
    </div> 
    
    <asp:UpdatePanel ID="ToolBoxUpdatePanel" runat="server">    
        <ContentTemplate>
            <div class="toolbox">
                <JQueryWidget:AdministratorToolBox ID="AdministratorToolBox" runat="server"/>
            </div>
            <asp:Button ID="Button1" runat="server" Text="Save"  
                CssClass="hide toolboxSaveButton" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <div class="widgetdownpanel">
        <a class="minimize">Minimize</a>
        <%--<a class="close">Close</a>--%>
        <a class="delete">Delete</a>
        <a class="edit">Edit Widget</a>
    </div> 
    <div class="dialog deleteWidget">
        <span class="dialogcontent">The Widget you selected will be deleted. Are you Sure?</span>
    </div>
    <div class="dialog editWidget">
        <span class="dialogcontent">
        </span>
        <iframe src="EditWidget.aspx" marginheight="0" marginwidth="0" frameborder="0" height="100px" width="100%"  scrolling="auto"></iframe>
    </div>
    <div class="dialog coverPage">
        <span>Saving Widget...</span>
    </div>
    
    <div class="widget draggable widgetSnap">
        <div class="widget_header">            
            <span class="widgettitle">&nbsp;</span>
            <a class="widgetedit"  href="#">Edit</a>
        </div>
        <div class="widget_body"> 
        </div>
        <div class="widget_footer">
        </div>
    </div>
    <% if(NeedWrapper){ %>
    <script type="text/javascript">
        var pageId = <%=PageID %>;
        var currentWidget = null;
        function pageLoadedEvent(sender,e)
        { 
            var _fromObj =null;
            var _toObj =null;
            $(".column").sortable({
                placeholder: "widgetholder1",
                connectWith: ".column",
                start:function(event,ui){
                    _fromObj ={
                              widgettypeid:$(ui.item).find("[widgettypeid]").attr("widgettypeid"),
                              index:$(ui.item).parent().children().index($(ui.item)),
                              columnid:$(ui.item).parent().attr("columnid")
                              };
                },
                update:function(event,ui){
                    if(_fromObj!=null)
                    {
                        _toObj=  {
                                  widgettypeid:$(ui.item).find("[widgettypeid]").attr("widgettypeid"),
                                  index:$(ui.item).parent().children().index($(ui.item)),
                                  columnid:$(ui.item).parent().attr("columnid")
                                  };
                        //coverPage("refresh widgets... ...");
                        var columnContainerObj =  $(ui.item).parent().parent();
                        if(_fromObj.widgettypeid == _toObj.widgettypeid
                            &&_fromObj.index == _toObj.index
                            &&_fromObj.columnid == _toObj.columnid) {
                            addWidget(_fromObj.widgettypeid,
                                _fromObj.index,
                                _fromObj.columnid,
                                columnContainerObj,
                                function(obj){   
                                obj.find(".updatepanelrefresh").click();
                            }); 
                            $(ui.item).replaceWith(createNewWidgetSnapWithAJAX($(ui.item).children("a").html()));                          
                        }
                        else{
                            moveWidget(_fromObj,_toObj);
                        }
                    }
                }
            });

            $(".widget").hover(function () { $(this).find(".widgetedit").show(); }, function () { $(this).find(".widgetedit").hide(); });
            $(".widget .widgetedit a").click(function () {
                var offset = $(this).offset();
                $(".widgetdownpanel").css("display", "block")
                                     .css("right", ($(document).width() - (offset.left + $(this).width())) + "px")
                                     .css("top", (offset.top + $(this).height()) + "px");
                currentWidget =$(this).parentsUntil(".widget").parent(); 
            });
            $(document).click(function (event) {
                if($(".widget .widgetedit").find("*").index($(event.target))<0){
                    $(".widgetdownpanel").hide(); 
                }
            });

            //Edit Panel Events
            $(".widgetdownpanel .minimize").click(function(){
                if(currentWidget!=null)
                {
                    if($(this).text()=="Minimize") {
                        $(currentWidget).children(".widget_body").hide();
                        $(this).text("Maximize");
                    }
                    else {                    
                        $(currentWidget).children(".widget_body").show();
                        $(this).text("Minimize");
                    }
                }
            });
            $(".widgetdownpanel .close").click(function(){
                if(currentWidget!=null) {
                    $(currentWidget).hide();
                }
            }); 
            $(".widgetdownpanel .delete").click(function(){
                $(".deleteWidget").dialog({
                    title:"delete widget",
                    resizable:false,
                    height:190,
                    modal:true,
                    buttons:{
                        "Yes":function(){
                            if(currentWidget!=null) {
                                var widgettypeid=$(currentWidget).find(".widget_body").attr("widgettypeid");
                                var index=$(currentWidget).parent().children().index($(currentWidget));
                                var columnid=$(currentWidget).parent().attr("columnid");                                 
                                
                                deleteWidget(widgettypeid,index,columnid,function(){
                                    $(currentWidget).remove();
                                });
                                $( this ).dialog( "close" );
                            }
                            else{
                                $( this ).dialog( "close" );
                            }
                            //coverPage("saving widget... ...");
                        },
                        "No":function(){
                            $(this).dialog("close");
                        }
                    }
                }); 
            });
            $(".widgetdownpanel .edit").click(function(){
                if(currentWidget!=null) {
                        var params = {
                                pageid:pageId,
                                index:$(currentWidget).parent().children().index($(currentWidget)),
                                columnid:$(currentWidget).parent().attr("columnid")
                            };
                        var columnContainerObj = $(currentWidget).parent().parent();
                        var paramsStr = $.param(params);
                        $(".editWidget > iframe").attr("src","EditWidget.aspx?"+paramsStr);
                        $(".editWidget").dialog({
                            title:"edit widget",
                            resizable:false,
                            height:240,
                            modal:true,
                            buttons:{
                                "Save":function(){ 
                                    var iframe =$(this).find("iframe")[0];
                                    $(iframe).load(function(){   
                                        currentWidget = null;
                                        columnContainerObj.find(".updatepanelrefresh").click(); 
                                    });
                                    $(iframe.contentDocument).find(".SaveButton").click();                 
                                    $( this ).dialog( "close" );
                                },
                                "Close":function(){
                                    $(this).dialog("close");
                                }
                            }
                        });
                }
            });                    
            
            $("#widgetRepository > div").draggable({            
                connectToSortable: ".column",
                helper:"clone"
            });
        }
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedEvent); 

        function coverPage(title){
            $(".coverPage span").html(title);
            $(".coverPage").dialog({
                modal:true,
                resizable:false,
                height:50
            });
            $(".ui-dialog-titlebar").hide();
        }

        function addWidget(widgettypeid,index,column,columnObj,callBack) {
            $.get("AJAXFunc.aspx",
                  {widgetid:widgettypeid,index:index,columnid:column,pageid:pageId,method:"dragWidget"},
                  function(data){
                    if(data)
                    {
                        if(callBack!=null) {
                            callBack(columnObj);
                        }
                    }
                  });
        }
        function moveWidget(fromObj,toObj,callBack)
        { 
            $.get("AJAXFunc.aspx",
                  {
                   widgetid:fromObj.widgettypeid,
                   index:fromObj.index,
                   columnid:fromObj.columnid,
                   towidgetid:toObj.widgettypeid,
                   toindex:toObj.index,
                   tocolumnid:toObj.columnid,
                   pageid:pageId,
                   method:"moveWidget"},
                   function(data){
                    if(data)
                    {
                        if(callBack!=null) {
                            callBack();
                        }
                    }
                  });
        }

        function deleteWidget(widgettypeid,index,column,callBack)
        {
            $.get("AJAXFunc.aspx",
                  {widgetid:widgettypeid,index:index,columnid:column,pageid:pageId,method:"deleteWidget"},
                  function(data){
                    if(data)
                    {
                        if(callBack!=null) {
                            callBack();
                        }
                    }
                  });
        }

        function createNewWidgetSnapWithAJAX(widgetTitle) { 
            var newWidget =$(".widgetSnap").clone().removeClass("widgetSnap");
            newWidget.find(".widgettitle").html(widgetTitle); 
            return newWidget;
        }
    </script>
    <%} %>
    </form>
</body>
</html>
